<template>
  <div>
    <h4><router-link :to="{path:'/' }" class="h4">首页-></router-link>{{name}}<span v-if="sname">->{{sname}}</span></h4>
     <div class="row">
       <div class="col-md-10 col-sm-10 col-xs-10 row">
          <div class="col-md-4 col-sm-4 col-xs-4 row wrap" v-for="item in List">
            <div class="col-md-8 col-sm-8 col-xs-8">
              <router-link :to="{path:'/ablumDetail',query:{aid:item.album.albumID}}">
              <img :src="item.album.cover.urls[0].url" class="img"/>
              </router-link>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4">
              <p>{{item.album.name}}</p>
              <p class="desc">{{item.album.desc}}</p>
            </div>
        </div>
        <ol>
          <button class="btn btn-info" @click="goto(prevIndex)">上一页</button>
          <button class="btn btn-info" @click="goto(nextIndex)">下一页</button>
        </ol>
       </div>
       <div class="col-md-2 col-sm-2 col-xs-2">
         <ul class="list-group">
           <li v-for="item in subMenuList">
             <router-link :to="{path:'/category',query:{cid:item.id,cname:name,sname:item.name}}">
             <a>{{item.name}}</a>
             </router-link>
           </li>
         </ul>
        </div>
     </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
     name:"",
     sname:"",
     List:[],
     subMenuList:[],
     current:0
    }
  },
  computed:{
    prevIndex(){
      if(this.current==0)
        return 0
      return this.current-1
    },
    nextIndex(){
      return this.current+1
    }
  },
  created(){
    this.get()
  },
  methods:{
    goto(index){
      this.current=index
      this.changeGet()
    },
    get(){
      if(typeof(this.$route.query.cid)==='undefined')
        return
      this.$http.get("https://api.imjad.cn/qqfm/v1/?type=album&id="+this.$route.query.cid).then((res)=>{
        this.name=this.$route.query.cname
        this.sname=this.$route.query.sname
        this.List=res.data.data.albumInfoList
        //console.log(res.data.data)
        this.getSub()
      })
    },
    getSub(){
      this.$http.get("/api/data").then((res)=>{
        var tmp=res.data.data.catList
        for(var i=0;i<tmp.length;i++){
          if(this.$route.query.cid===tmp[i].id){
            this.subMenuList=tmp[i].subList
            return
          }
        }
      })
    },
    changeGet(){
      this.$http.get("https://api.imjad.cn/qqfm/v1/?type=album&id="+this.$route.query.cid+'&page='+this.current).then((res)=>{
        this.name=this.$route.query.cname
        this.sname=this.$route.query.sname
        this.List=res.data.data.albumInfoList
      })
    }
  },
  watch:{
    '$route':'get'
  }
}
</script>
<style scoped>
h4,.h4{
  margin:1rem;color:#d26917;
}
.wrap{
  margin:1rem 0;
}
.desc{
  height:150px;width:100%;overflow:hidden;
}
ul,ol{list-style-type: none;}
ul{
  background:red;
}
ul li{
	height:50px;line-height:50px;color:yellow;
}
ul li a{
	font-size:14px; padding-left:10px;
}

.img{
  width:100%;height:100%;
}

.list-group a{
  color:yellow;text-decoration: none;
}
.list-group li:hover{
  background: #b8860b;
}
</style>
